<template>
  <div class="wrapper">
         <div class="pl12 pb12 pr12">
              <Card class="Position">
                <p class="maC span-message1 spanPo" style="zIndex: 1">
                  <span>新闻中心</span>
                </p>
                <div class="News Position">
                  <span
                    class="gen"
                    style="float: right"
                    @click="moreClick('news','新闻中心列表','/more-detail')"
                  >更多</span>
                  <div class="new-child wh1 hg">
                    <div class="pic-img">
                      <div class="new-child-img">
                        <horse-light @onChange="carouselChange" ref="carouse" :data-list="News1"></horse-light>
                        <!--   -->
                      </div>
                      <div class="new-content new-content1">
                        <div
                          @mouseover="$refs.carouse.moveClear()"
                          @mouseleave="$refs.carouse.move()"
                          id="newsContent"
                        >
                          <div v-for="(item ,index) in News1" :key="index">
                            <p v-if="(index<8)" class="flex maC wh1" :ref="'pNews'+index">
                              <a
                                class="flex-a"
                                href="javascript:void(0);"
                                :class="{lightNews:carouselValue==index}"
                                @mouseover="$refs.carouse.Index=index"
                                @click="localClick(item.infoCode=='1',item.url,item.id,item.infoId)"
                              >
                                <span class="new-icon new-icon-span">
                                  <span class="word">{{index+1}}</span>
                                </span>
                                <span
                                  class="size4 pl12 span-Eli Ellipsis"
                                  :style="{width:Width+'px'}"
                                >{{item.newsTitle}}</span>
                                <span class="NewsTime NewsTime1">{{item.createTime}}</span>
                              </a>
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>
            </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import {
  selectNewsPortal
} from "@/api/moduleIndex.js";
import {  fromPost, screenW ,onSize} from "@/libs/tool";
import horseLight from "@/components/common/horseLight.vue";
export default {
name:'',
components:{horseLight},
  props:{},
  data(){
    return {
            carouselValue: 0,
            News1 :[],
            accessToken: "",
            Width: 0, //新闻宽度超出显示省略号
               screenWidth: screenW(), //屏幕宽度
    }
  },
  watch:{
         screenWidth(val) {
            this.screenWidth = val;
            this.onWidth();
        }
  },
  computed:{},
  methods:{
             fromSummit: fromPost,
        init() {
      let userInfo = JSON.parse(Cookies.get("userInfo"));
            this.selectNewsPortal();
    },
   moreClick(type, name, path) {
      this.setStore("moreDetailType", { type: type, name: name, path: path });
      this.$router.push({
        path: path
      });
    },
    carouselChange(val) {
      this.carouselValue = val;
    },
     selectNewsPortal() {
      //新闻

      selectNewsPortal({
        departmentId: this.userInfo.departmentId,
        num: 7
      }).then(res => {
        let data = res;
        if (res.success) {
          this.tipsNews = data;
          this.News1 = data.result;
        }
      });
    },
       onWidth() {
      let newsId = document.getElementById("newsContent");
      let that = this;
      setTimeout(function() {
        that.Width = newsId.offsetWidth - 12 - 160;
      }, 0);
    },
  },
  created(){
      onSize(this, "screenWidth"); //监听赋值
    this.onWidth(); //动态的添加宽度为了本页面的省略号才搞的  
  },
  mounted(){}
}
</script>
<style lang="less" scoped>
.wrapper{
    width:100%;
    height: 100%;
}
</style>
<style lang="less">
@import "./less/home.less";
@import "../../styles/common.less";
.my-card {
  .ivu-card-body {
    padding: 10px 12px;
  }
}
.my-card1 {
  .ivu-card-body {
    padding: 0;
  }
}
</style>
<style scoped lang="less">
@import "./less/page_home.less";
.demo-carousel {
  width: 100%;
  height: 100%;
}
.page_home_main {
  height: 100%;
}
.page_home_scroll {
  height: 100%;
  width: 100%;
}
</style>